import React, { memo, useState } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { PicturesWrapper } from './style'
import PictureBrowser from '@/components/picture-browser'

const DetailPictures = memo(() => {
  const [isShowBrowser, setIsShowBrowser] = useState(false)

  const { detailInfo } = useSelector((state) => ({
    detailInfo: state.detail.detailInfo,
  }), shallowEqual)

  function showPicClickHandle () {
    setIsShowBrowser(true)
  }

  function closeBrowser () {
    setIsShowBrowser(false)
  }

  return (
    <PicturesWrapper>
      <div className="pictures" onClick={showPicClickHandle}>
        <div className="left">
          <div className="item">
            <img src={detailInfo?.picture_urls[0]} alt="" />
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {
            detailInfo.picture_urls?.slice(1,5).map((item) => {
              return (
                <div className="item" key={item}>
                  <img src={item} alt="" />
                  <div className="cover"></div>
                </div>
              )
            })
          }
        </div>
      </div>

      <div className="showBtn" onClick={showPicClickHandle}>查看照片</div>

      {isShowBrowser && <PictureBrowser pictureUrls={detailInfo.picture_urls} closeClick={closeBrowser} />}
    </PicturesWrapper>
  )
})

export default DetailPictures